<template>
	<view class="vk-data-image-map">
		<!-- 背景图片区域 -->
		<image class="image" :src="src" mode="widthFix"></image>
		<!-- 内容区域 -->
		<view
			class="item"
			v-for="(item, index) in localdata"
			:key="index"
			:style="{
				top: item.top * 2 + 'rpx',
				left: item.left * 2 + 'rpx',
				width: item.width * 2 + 'rpx',
				height: item.height * 2 + 'rpx',
				border: border ? '1px solid ' + borderColor : '',
				borderRadius: item.shape === 'circle' ? '50%' : ''
			}"
			@click.stop="_click(item, index)"
		></view>
	</view>
</template>

<script>
export default {
	name: "vk-data-image-map",
	emits: ["click"],
	props: {
		localdata: {
			type: Array,
			default: function() {
				return [];
			}
		},
		src: {
			type: String
		},
		border: {
			type: Boolean,
			default: false
		},
		borderColor: {
			type: String,
			default: "#cccccc"
		}
	},
	data: function() {
		return {};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		_click(item, index) {
			let that = this;
			let { vk } = that;
			that.$emit("click", {
				item,
				index
			});
		}
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
.vk-data-image-map {
	width: 100%;
	position: relative;
	.image {
		width: 100%;
		display: block;
	}
	.item {
		position: absolute;
	}
	.item:active {
		background-color: rgba(0, 0, 0, 0.2);
	}
}
</style>
